<template>
  <div class="listOrder">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="User" name="first">User</el-tab-pane>
      <el-tab-pane label="Config" name="second">Config</el-tab-pane>
      <el-tab-pane label="Role" name="third">Role</el-tab-pane>
      <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
    </el-tabs>
    <h1>订单列表</h1>
    <!-- 展现数据 -->
    <el-table
      ref="multipleTableRef"
      :data="store.state.order.orders"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="订单号">
        <template #default="scope">{{ scope.row.orderNum }}</template>
      </el-table-column>

      <el-table-column property="createAt" label="下单时间" />
      <el-table-column property="customerId" label="会员账号" show-overflow-tooltip />
      <el-table-column property="totalAmount" label="订单总额">
        <template #default="scope">￥{{ scope.row.totalAmount.toFixed(2) }}</template>
      </el-table-column>
      <el-table-column property="storeName" label="店铺" />
      <el-table-column label="订单状态">
        <template #default="scope">
          <!-- 根据内容创建不同的class -->
          <span
            :class="{
              success: scope.row.status === '已处理',
              error: scope.row.status === '待付款',
            }"
            >{{ scope.row.status }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default><el-button type="text">查看订单</el-button></template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts" setup>
// 使用vuex 的store仓库
import { useStore } from "vuex";
// 引用ref
import { ref } from "vue";
// 创建仓库
const store = useStore();
// 执行action中的getWebOrder方法
store.dispatch("getWebOrder");
// 定义订单接口
interface IOrder {
  orderNum: string;
  createAt: string;
  customerId: string;
  status: string;
  totalAmount: string;
  storeName: string;
}
// 多选项目
const multipleSelection = ref<IOrder[]>([]);
// 处理多选
const handleSelectionChange = (val: IOrder[]) => {
  multipleSelection.value = val;
};
const activeName = ref("first");
</script>
<style>
.success {
  color: green;
}
.error {
  color: orangered;
}
</style>
